<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="ico/favicon.ico">

    <title>Paperclip - UI Elements</title>

    <!-- Bootstrap core CSS -->
    <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Resources -->
    <link href="fonts/font-awesome-4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    
    <!-- Navigation -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="..."></a>
        </div>
        <div class="collapse navbar-collapse">
          <button class="navbar-btn btn btn-red pull-right hidden-sm hidden-xs">Sign In</button>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
              <a href="ui-elements.html#" class="dropdown-toggle" data-toggle="dropdown">Home <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="index.html">Home: Default</a></li>
                <li><a href="index-full.html">Home: Fullscreen</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="ui-elements.html#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="about-us.html">About Us</a></li>
                <li><a href="coming-soon.html">Coming Soon</a></li>
                <li><a href="contact-us.html">Contact Us</a></li>
                <li><a href="help-center.html">Help Center</a></li>
                <li><a href="help-item.html">Help Item</a></li>
                <li><a href="pricing-table.html">Pricing Table</a></li>
                <li><a href="responsive-video.html">Responsive Video</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="sign-in.html">Sign In</a></li>
                <li><a href="sign-up.html">Sign Up</a></li>
                <li><a href="error-page.html">404 Error Page</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="ui-elements.html#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="portfolio-item.html">Portfolio Item</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="ui-elements.html#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="blog.html">Blog</a></li>
                <li><a href="blog-post.html">Blog Post</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="ui-elements.html#" class="dropdown-toggle" data-toggle="dropdown">Shop <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="shop.html">Shop</a></li>
                <li><a href="shop-item.html">Shop Item</a></li>
                <li><a href="shopping-cart.html">Shopping Cart</a></li>
                <li><a href="user-profile.html">User Profile</a></li>
              </ul>
            </li>
            <li class="active hidden-sm">
              <a href="ui-elements.html">UI Elements</a>
            </li>
            <!-- Navbar Search -->
            <li class="hidden-xs" id="navbar-search">
              <a href="ui-elements.html#">
                <i class="fa fa-search"></i>
              </a>
              <div class="hidden" id="navbar-search-box">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search">
                  <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                  </span>
                </div>
              </div>
            </li>
          </ul>
          <!-- Mobile Search -->
          <form class="navbar-form navbar-right visible-xs" role="search">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search">
              <span class="input-group-btn">
                <button class="btn btn-red" type="button">Search!</button>
              </span>
            </div>
          </form>
        </div><!--/.nav-collapse -->
      </div>
    </div> <!-- / .navigation -->

    <!-- Wrapper -->
    <div class="wrapper">

      <!-- Topic Header -->
      <div class="topic">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3>UI Elements</h3>
            </div>
            <div class="col-sm-8">
              <ol class="breadcrumb pull-right hidden-xs">
                <li><a href="index.html">Home</a></li>
                <li class="active">UI Elements</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div class="row">
          <!-- Vertical Navigation -->
          <div class="col-md-3">
            <div class="panel panel-default bs-sidebar affix-top" data-spy="affix" data-offset-top="110" data-offset-bottom="379">
              <div class="panel-heading">
                Elements
              </div>
              <div class="panel-body">
                <ul>
                  <li><a href="ui-elements.html#typography">Typography</a></li>
                  <li><a href="ui-elements.html#buttons">Buttons</a></li>
                  <li><a href="ui-elements.html#navs">Navs</a></li>
                  <li><a href="ui-elements.html#pagination">Pagination</a></li>
                  <li><a href="ui-elements.html#tooltips">Tooltips</a></li>
                  <li><a href="ui-elements.html#popovers">Popovers</a></li>
                  <li><a href="ui-elements.html#panels">Panels</a></li>
                  <li><a href="ui-elements.html#accordions">Accordion</a></li>
                  <li><a href="ui-elements.html#carousel">Carousel</a></li>
                  <li><a href="ui-elements.html#info-boards">Info Boards</a></li>
                  <li><a href="ui-elements.html#social-links">Social Links</a></li>
                  <li><a href="ui-elements.html#responsive-iframes">Responsive iFrames</a></li>
                </ul>
              </div>
            </div>          
          </div> <!-- / .col-md-3 -->
          <div class="col-md-9">

            <!-- Typography -->
            <h2 class="headline first-child" id="typography"><span>Typography</span></h2>
            <div class="row">
              <div class="col-sm-8">
                <p class="lead">
                  Phasellus a sem et augue ullamcorper gravida. Maecenas sed porta orci. Aliquam interdum felis sapien, vitae viverra diam consectetur a. Sed interdum quam leo, sed pretium eros mattis vitae.
                </p>
                <p>
                  Phasellus a sem et augue ullamcorper gravida. Maecenas sed porta orci. Aliquam interdum felis sapien, vitae viverra diam consectetur a. Sed interdum quam leo, sed pretium eros mattis vitae.
                </p>
              </div>
              <div class="col-sm-4">
                <h1 class="first-child">Header 1</h1>
                <h2>Header 2</h2>
                <h3>Header 3</h3>
                <h4>Header 4</h4>
                <h5>Header 5</h5>
                <h6>Header 6</h6>
              </div>
            </div>

            <!-- Buttons -->
            <h2 class="headline" id="buttons"><span>Buttons</span></h2>
            <div class="row">
              <div class="col-sm-6">
                <div class="panel-body">
                  <p><a class="btn btn-lg btn-default">Large Button Red</a> <a class="btn btn-lg btn-red">Large Button Red</a> </p>
                  <p><a class="btn btn-default">Default Button</a> <a class="btn btn-red">Default Button</a> </p>
                  <p><a class="btn btn-sm btn-default">Small Button</a> <a class="btn btn-sm btn-red">Small Button</a> </p>
                  <p><a class="btn btn-xs btn-default">Extra Small</a> <a class="btn btn-xs btn-red">Extra Small</a> </p>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="panel-body">
                  <p><a class="btn btn-lg btn-default">Large Button Blue</a> <a class="btn btn-lg btn-blue">Large Button Blue</a> </p>
                  <p><a class="btn btn-default">Default Button</a> <a class="btn btn-blue">Default Button</a> </p>
                  <p><a class="btn btn-sm btn-default">Small Button</a> <a class="btn btn-sm btn-blue">Small Button</a> </p>
                  <p><a class="btn btn-xs btn-default">Extra Small</a> <a class="btn btn-xs btn-blue">Extra Small</a> </p>
                </div>
              </div>
            </div>

            <!-- Navs -->
            <h2 class="headline" id="navs"><span>Navs</span></h2>
            <div class="row">
              <div class="col-sm-6">
                <h3 class="first-child">Tabs</h3>
                <ul class="nav nav-tabs">
                  <li class="active"><a href="ui-elements.html#">Home</a></li>
                  <li><a href="ui-elements.html#">Profile</a></li>
                  <li><a href="ui-elements.html#">Messages</a></li>
                </ul>
              </div>
              <div class="col-sm-6">
                <h3 class="second-child">Pills</h3>
                <ul class="nav nav-pills">
                  <li class="active"><a href="ui-elements.html#">Home</a></li>
                  <li><a href="ui-elements.html#">Profile</a></li>
                  <li><a href="ui-elements.html#">Messages</a></li>
                </ul>
              </div>
            </div>

            <!-- Pagination -->
            <h2 class="headline" id="pagination"><span>Pagination</span></h2>

            <!-- Pagination Large -->
            <div class="pagination-example">
              <ul class="pagination pagination-lg">
                <li><a href="ui-elements.html#">&laquo;</a></li>
                <li class="active"><a href="ui-elements.html#">1</a></li>
                <li><a href="ui-elements.html#">2</a></li>
                <li><a href="ui-elements.html#">3</a></li>
                <li><a href="ui-elements.html#">4</a></li>
                <li><a href="ui-elements.html#">5</a></li>
                <li><a href="ui-elements.html#">&raquo;</a></li>
              </ul>
            </div>
            <!-- Pagination Default -->
            <div class="pagination-example">
              <ul class="pagination">
                <li><a href="ui-elements.html#">&laquo;</a></li>
                <li class="active"><a href="ui-elements.html#">1</a></li>
                <li><a href="ui-elements.html#">2</a></li>
                <li><a href="ui-elements.html#">3</a></li>
                <li><a href="ui-elements.html#">4</a></li>
                <li><a href="ui-elements.html#">5</a></li>
                <li><a href="ui-elements.html#">&raquo;</a></li>
              </ul>
            </div>
            <!-- Pagination Small -->
            <div class="pagination-example">
              <ul class="pagination pagination-sm">
                <li><a href="ui-elements.html#">&laquo;</a></li>
                <li class="active"><a href="ui-elements.html#">1</a></li>
                <li><a href="ui-elements.html#">2</a></li>
                <li><a href="ui-elements.html#">3</a></li>
                <li><a href="ui-elements.html#">4</a></li>
                <li><a href="ui-elements.html#">5</a></li>
                <li><a href="ui-elements.html#">&raquo;</a></li>
              </ul>
            </div>

            <!-- Tooltips -->
            <h2 class="headline" id="tooltips"><span>Tooltips</span></h2>
            <div class="tooltip-test">
              <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
              <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
              <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
              <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
            </div>

            <!-- Popovers -->
            <h2 class="headline" id="popovers"><span>Popovers</span></h2>
            <div class="popover-test">
              <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                Popover on left
              </button>
              <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                Popover on top
              </button>
              <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
              sagittis lacus vel augue laoreet rutrum faucibus.">
                Popover on bottom
              </button>
              <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                Popover on right
              </button>
            </div>

            <!-- Panels -->
            <h2 class="headline" id="panels"><span>Panels</span></h2>
            <div class="row">
              <div class="col-sm-4">
                <!-- Panel default -->
                <div class="panel panel-default">
                  <div class="panel-heading">Panel default</div>
                  <div class="panel-body">
                    Panel content
                  </div>
                </div>
              </div>
              <div class="col-sm-4">
                <!-- Panel red -->
                <div class="panel panel-red">
                  <div class="panel-heading">Panel red</div>
                  <div class="panel-body">
                    Panel content
                  </div>
                </div>
              </div>
              <div class="col-sm-4">
                <!-- Panel blue -->
                <div class="panel panel-blue">
                  <div class="panel-heading">Panel blue</div>
                  <div class="panel-body">
                    Panel content
                  </div>
                </div>
              </div>
            </div>

            <!-- Accordion -->
            <h2 class="headline" id="accordions"><span>Accordion</span></h2>
            <div class="panel-group" id="accordion">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <a data-toggle="collapse" data-parent="#accordion" href="ui-elements.html#collapseOne">
                    Collapsible Group Item #1
                  </a>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <a data-toggle="collapse" data-parent="#accordion" href="ui-elements.html#collapseTwo" class="collapsed">
                    Collapsible Group Item #2
                  </a>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <a data-toggle="collapse" data-parent="#accordion" href="ui-elements.html#collapseThree" class="collapsed">
                    Collapsible Group Item #3
                  </a>
                </div>
                <div id="collapseThree" class="panel-collapse collapse">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
            </div>

            <!-- Carousel -->
            <h2 class="headline" id="carousel"><span>Carousel</span></h2>
            <div class="carousel-example">
              <!-- Image Carousel -->
              <div id="portfolio-slideshow" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                  <div class="item active">
                    <img src="img/general-1.jpg" class="img-responsive" alt="...">
                  </div>
                  <div class="item">
                    <img src="img/general-2.jpg" class="img-responsive" alt="...">
                  </div>
                  <div class="item">
                    <img src="img/general-3.jpg" class="img-responsive" alt="...">
                  </div>
                  <div class="item">
                    <img src="img/general-4.jpg" class="img-responsive" alt="...">
                  </div>
                </div>
                <!-- Controls -->
                <a class="carousel-arrow carousel-arrow-prev" href="ui-elements.html#portfolio-slideshow" data-slide="prev">
                  <i class="fa fa-angle-left"></i>
                </a>
                <a class="carousel-arrow carousel-arrow-next" href="ui-elements.html#portfolio-slideshow" data-slide="next">
                  <i class="fa fa-angle-right"></i>
                </a>
              </div>
            </div>

            <!-- Info Boards -->
            <h2 class="headline" id="info-boards"><span>Info Boards</span></h2>
            <div class="row">
              <div class="col-sm-6">
                <!-- Info Board Red -->
                <div class="info-board info-board-red">
                  <h4>Welcome Aboard</h4>
                  <p>
                    Nunc in neque nec arcu vulputate ullamcorper. Ut id orci ac arcu consectetur fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                  </p>
                </div>
              </div>
              <div class="col-sm-6">
                <!-- Info Board Blue -->
                <div class="info-board info-board-blue">
                  <h4>Welcome Aboard</h4>
                  <p>
                    Nunc in neque nec arcu vulputate ullamcorper. Ut id orci ac arcu consectetur fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
                  </p>
                </div>
              </div>
            </div> <!-- / .row -->

            <!-- Social Links -->
            <h2 class="headline" id="social-links"><span>Social Links</span></h2>
            <div class="social social-lg">
              <ul class="list-inline">
                <li><a href="ui-elements.html#" class="rss"><i class="fa fa-rss"></i></a></li>
                <li><a href="ui-elements.html#" class="facebook"><i class="fa fa-facebook"></i></a></li>
                <li><a href="ui-elements.html#" class="twitter"><i class="fa fa-twitter"></i></a></li>
                <li><a href="ui-elements.html#" class="plus"><i class="fa fa-plus"></i></a></li>
                <li><a href="ui-elements.html#" class="vk"><i class="fa fa-vk"></i></a></li>
                <li><a href="ui-elements.html#" class="vimeo"><i class="fa fa-vimeo-square"></i></a></li>
                <li><a href="ui-elements.html#" class="github"><i class="fa fa-github"></i></a></li>
                <li><a href="ui-elements.html#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="ui-elements.html#" class="dropbox"><i class="fa fa-dropbox"></i></a></li>
                <li><a href="ui-elements.html#" class="youtube"><i class="fa fa-youtube"></i></a></li>
              </ul>
            </div>
            <div class="social">
              <ul class="list-inline">
                <li><a href="ui-elements.html#" class="rss"><i class="fa fa-rss"></i></a></li>
                <li><a href="ui-elements.html#" class="facebook"><i class="fa fa-facebook"></i></a></li>
                <li><a href="ui-elements.html#" class="twitter"><i class="fa fa-twitter"></i></a></li>
                <li><a href="ui-elements.html#" class="plus"><i class="fa fa-plus"></i></a></li>
                <li><a href="ui-elements.html#" class="vk"><i class="fa fa-vk"></i></a></li>
                <li><a href="ui-elements.html#" class="vimeo"><i class="fa fa-vimeo-square"></i></a></li>
                <li><a href="ui-elements.html#" class="github"><i class="fa fa-github"></i></a></li>
                <li><a href="ui-elements.html#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="ui-elements.html#" class="dropbox"><i class="fa fa-dropbox"></i></a></li>
                <li><a href="ui-elements.html#" class="youtube"><i class="fa fa-youtube"></i></a></li>
              </ul>
            </div>
            <div class="social social-sm">
              <ul class="list-inline">
                <li><a href="ui-elements.html#" class="rss"><i class="fa fa-rss"></i></a></li>
                <li><a href="ui-elements.html#" class="facebook"><i class="fa fa-facebook"></i></a></li>
                <li><a href="ui-elements.html#" class="twitter"><i class="fa fa-twitter"></i></a></li>
                <li><a href="ui-elements.html#" class="plus"><i class="fa fa-plus"></i></a></li>
                <li><a href="ui-elements.html#" class="vk"><i class="fa fa-vk"></i></a></li>
                <li><a href="ui-elements.html#" class="vimeo"><i class="fa fa-vimeo-square"></i></a></li>
                <li><a href="ui-elements.html#" class="github"><i class="fa fa-github"></i></a></li>
                <li><a href="ui-elements.html#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="ui-elements.html#" class="dropbox"><i class="fa fa-dropbox"></i></a></li>
                <li><a href="ui-elements.html#" class="youtube"><i class="fa fa-youtube"></i></a></li>
              </ul>
            </div>

            <!-- Responsive iFrames -->
            <h2 class="headline" id="responsive-iframes"><span>Responsive iFrames</span></h2>
            <div class="row">
              <div class="col-sm-6">
                <div class="video-container">
                  <iframe src="http://player.vimeo.com/video/67449472?title=0&amp;byline=0&amp;portrait=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="google-maps">
                  <iframe width="500" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=San+Francisco,+CA,+United+States&amp;aq=0&amp;oq=san+f&amp;sll=37.77493,-122.419416&amp;sspn=0.158751,0.338173&amp;ie=UTF8&amp;hq=&amp;hnear=%D0%A1%D0%B0%D0%BD-%D0%A4%D1%80%D0%B0%D0%BD%D1%86%D0%B8%D1%81%D0%BA%D0%BE,+%D0%9A%D0%B0%D0%BB%D0%B8%D1%84%D0%BE%D1%80%D0%BD%D0%B8%D1%8F,+%D0%A1%D0%BE%D0%B5%D0%B4%D0%B8%D0%BD%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5+%D0%A8%D1%82%D0%B0%D1%82%D1%8B+%D0%90%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B8&amp;t=m&amp;ll=37.774921,-122.419453&amp;spn=0.023745,0.030041&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=San+Francisco,+CA,+United+States&amp;aq=0&amp;oq=san+f&amp;sll=37.77493,-122.419416&amp;sspn=0.158751,0.338173&amp;ie=UTF8&amp;hq=&amp;hnear=%D0%A1%D0%B0%D0%BD-%D0%A4%D1%80%D0%B0%D0%BD%D1%86%D0%B8%D1%81%D0%BA%D0%BE,+%D0%9A%D0%B0%D0%BB%D0%B8%D1%84%D0%BE%D1%80%D0%BD%D0%B8%D1%8F,+%D0%A1%D0%BE%D0%B5%D0%B4%D0%B8%D0%BD%D0%B5%D0%BD%D0%BD%D1%8B%D0%B5+%D0%A8%D1%82%D0%B0%D1%82%D1%8B+%D0%90%D0%BC%D0%B5%D1%80%D0%B8%D0%BA%D0%B8&amp;t=m&amp;ll=37.774921,-122.419453&amp;spn=0.023745,0.030041&amp;z=14&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
                </div>
              </div>
            </div> <!-- / .row -->

          </div> <!-- / .col-md-9 -->
        </div>
      </div> <!-- / .container -->

    </div> <!-- / .wrapper -->

    <!-- Footer -->
    <footer>
      <div class="container">
        <div class="row">
          <!-- Contact Us -->
          <div class="col-sm-4">
            <h4><i class="fa fa-map-marker text-red"></i> Contact Us</h4>
            <p>Do not hesitate to contact us if you have any questions or feature requests:</p>
            <p>
              San Francisco, CA 94101<br />
              1987 Lincoln Street<br />
              Phone: +0 000 000 00 00<br />
              Fax: +0 000 000 00 00<br />
              Email: <a href="ui-elements.html#">admin@mysite.com</a>
            </p>
          </div>
          <!-- Recent Tweets -->
          <div class="col-sm-4">
            <h4><i class="fa fa-twitter-square text-red"></i> Recent Tweets</h4>
            <div class="tweet">
              <i class="fa fa-twitter fa-2x"></i>
              <p>
                Ut tincidunt erat quis viverra consectetur. Suspendisse tempus vulputate leo.
                <a href="ui-elements.html#">1 day ago</a>
              </p>
            </div>
            <div class="tweet">
              <i class="fa fa-twitter fa-2x"></i>
              <p>
                Mauris eget lacus ut ipsum dignissim malesuada quis nec ante.
                <a href="ui-elements.html#">2 days ago</a>
              </p>
            </div>
          </div>
          <!-- Newsletter -->
          <div class="col-sm-4">
            <h4><i class="fa fa-envelope text-red"></i> Newsletter</h4>
            <p>
              Enter your e-mail below to subscribe to our free newsletter.
              <br>
              We promise not to bother you often!
            </p>
            <form class="form" role="form">
              <div class="row">
                <div class="col-sm-8">
                  <div class="input-group">
                    <label class="sr-only" for="subscribe-email">Email address</label>
                    <input type="email" class="form-control" id="subscribe-email" placeholder="Enter your email">
                    <span class="input-group-btn">
                      <button type="submit" class="btn btn-default">OK</button>
                    </span>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </footer>

    <!-- Copyright -->
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="copyright">
            Copyright 2014 - Paperclip Theme by <a href="https://twitter.com/YevSim">Yevgeny S.</a> | All Rights Reserved
          </div>
        </div>
      </div>  <!-- / .row -->
    </div> <!-- / .container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scrolltopcontrol.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/ui-elements.js"></script>
  </body>
</html>